<template>
  <div ref="mesChart"></div>
</template>

<script>
import colorList from '../../../../../utils/chartBaseColor'

export default {
  name: 'WorkgroupPie',
  data() {
    return {
      wipList: [], // 原始数据
      seriesList: [], // 图表数组，
      legendList: [], // 图例数组
      myChart: {}, // 初始化画布
      colorList: colorList // 图表基础色
    }
  },
  computed: {
    // 报表数组
    parseList() {
      if (this.wipList.length < 12) {
        return this.wipList
      } else {
        let pre = this.wipList.slice(0, 11)
        let next = this.wipList.slice(11)
        let total = next.reduce((a, b) => a + b.number, 0)
        pre.push({name: '其他', number: total})
        return pre
      }
    },
    // 在制品总数
    count() {
      return this.wipList.reduce((a, b) => a + b.number, 0)
    }
  },
  mounted() {
    this.myChart = this.$echarts.init(this.$refs.mesChart)
  },
  methods: {
    // 获取图表
    getChart(wipList) {
      this.wipList = wipList
      this.seriesList = this.parseList.map(item => {
        return {name: item.name, value: item.number}
      })
      this.legendList = this.parseList.map(item => item.name)
      this.drawPieChart()
    },
    // 绘制
    drawPieChart() {
      const _this = this
      this.myChart.setOption(
        {
          tooltip: {
            trigger: 'item',
            textStyle: {fontSize: 12},
            backgroundColor: 'rgba(0, 0, 0, 0.85)',
            //formatter: '{a} {b}： {c} ({d}%)',
            formatter: function (param) {
              return param.seriesName + '<br>' +
                param.marker + param.name + '：' + param.value +
                ' (' + (param.value / _this.count * 100).toFixed(2) + '%' + ')' + '<br>';
            }
          },
          title: {
            text: '在制品总数',
            subtext: _this.count,
            x: '39.5%',
            y: '45%',
            textAlign: 'center',
            textStyle: {
              color: '#7e8e9f',
              fontSize: 14,
              fontWeight: 'normal',
              align: 'center',
              width: 100
            },
            subtextStyle: {
              color: '#000',
              fontSize: 32,
              fontWeight: 'normal',
              align: 'center',
              width: 100
            }
          },
          legend: {
            orient: 'vertical',
            icon: 'circle',
            right: '30%',
            top: 'center',
            height: 150,
            itemWidth: 12,
            itemHeight: 12,
            itemGap: 15,
            data: this.legendList,
            formatter: function (name) {
              return name + '               ' + _this.wipList.find((item) => name === item.name).number || 0
            },
          },
          series: [
            {
              name: '在制品数量',
              type: 'pie',
              radius: ['50%', '70%'],
              center: ['40%', '50%'],
              data: this.seriesList,
              itemStyle: {
                normal: {
                  label: {
                    show: false,
                    formatter: '{b} : {c} \n ({d}%)'
                  },
                  labelLine: {
                    show: false
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ],
          color: this.colorList
        })
    }
  }
}
</script>

<style scoped>

</style>
